<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <title>新增岗位</title>
    <%@ include file="/include/openstyles.jsp" %>
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/validate-methods.js"></script>
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/jquery/jquery-form.js"></script>
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/input.js"></script>
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/lui.jiantingdiv.js"></script>
    <script type="text/javascript" src="${ctx}/assets/uc/js/common.js"></script>
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/ztree/js/jquery.ztree.core-3.5.js"></script>
    <!-- 树插件核心 -->
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/ztree/js/jquery.ztree.exedit-3.5.js"></script>
    <script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <style>
        .help-block {
            margin: 0px !important;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col-xs-12">
        <div class="space-12"></div>
        <form class="form-horizontal" role="form" id="position_form">
            <div class="tabbable">
                <div class="profile-user-info profile-user-info-striped">
                    <div class="profile-info-row">
                        <div class="profile-info-name">岗位编号：</div>
                        <div class="profile-info-value">
                            <input type="text" id="id" name="id"
                                   class="col-xs-10 col-sm-8 " placeholder="只能输入数字"/>
                        </div>
                    </div>
                    <div class="profile-info-row">
                        <div class="profile-info-name">岗位名称：</div>
                        <div class="profile-info-value">
                            <input type="text" id="name" name="name"
                                   class="col-xs-10 col-sm-8" placeholder="不能以下划线开头"/>
                        </div>
                    </div>
                    <div class="profile-info-row">
                        <div class="profile-info-name">排序字段：</div>
                        <div class="profile-info-value">
                            <input type="text" id="order" name="order"
                                   class="col-xs-10 col-sm-8" placeholder="数字组成"/>
                        </div>
                    </div>
                    <div class="profile-info-row">
                        <div class="profile-info-name">岗位描述：</div>
                        <div class="profile-info-value">
							<textarea class="col-xs-10 col-sm-8 " style="resize:none;padding-left:3px !important;"
                                      maxlength="200" rows="3" id="description_edit" name="description"
                                      placeholder="描述岗位"></textarea>
                        </div>
                    </div>
                    <div class="profile-info-row">
                        <div class="profile-info-name">岗位类型：</div>
                        <div class="profile-info-value">
                            <select id="type" name="type"
                                    onchange="change(this.options[this.options.selectedIndex].value)"
                                    class="form-control col-xs-10 col-sm-8">
                            </select>
                        </div>
                    </div>
                    <%--checkedOrgs--%>
                    <div class="profile-info-row" id="orgDiv" style="display: none">
                        <div class="profile-info-name">组织机构：</div>
                        <div class="profile-info-value">
                            <div class="widget-box widget-color-blue2 col-xs-10 col-sm-8"
                                 style="max-height:300px;height:auto!important">
                                <div class="widget-header">
                                    <h4 class="widget-title lighter smaller">部门列表</h4>
                                </div>
                                <div class="widget-body">
                                    <div class="widget-main padding-8">
                                        <div class="zTreeDemoBackground">
                                            <ul id="treeDemo" class="ztree"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="profile-info-row" id="plDiv" style="display:none;">
                        <div class="profile-info-name">岗位级别：</div>
                        <div class="profile-info-value">
                            <div class="widget-box widget-color-blue2 col-xs-10 col-sm-8"
                                 style="max-height:300px;height:auto!important">
                                <div class="widget-header">
                                    <h4 class="widget-title lighter smaller">类别列表</h4>
                                </div>
                                <div class="widget-body">
                                    <div class="widget-main padding-8">
                                        <div class="zTreeDemoBackground">
                                            <ul id="plTree" class="ztree"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/javascript">

    var form = "position_form";
    var $form = $("#" + form);

    var tree = "treeDemo";//树id
    var $tree = $("#treeDemo");
    var zTree, plTree;

    jQuery(function ($) {

        fillForm();

        var setting = {
            async: {
                autoParam: ["id=id"],
                enable: true,
                type: "GET",
                url: "${ctx}/${frameworkPath}/position/${param.id}/org"
            },
            check: {
                enable: true,
                chkStyle: 'checkbox'
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onAsyncSuccess: zTreeOnAsyncSuccess
            }
        };

        var plTreeSetting = {
            async: {
                autoParam: ["id=id"],
                enable: true,
                type: "GET",
                url: "${ctx}/${frameworkPath}/positionlevel/${param.id}/get"
            },
            check: {
                enable: true,
                chkStyle: 'checkbox'
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onAsyncSuccess: plTreeOnAsyncSuccess
            }
        };

        zTree = $.fn.zTree.init($tree, setting); //树初始化

        plTree = $.fn.zTree.init($('#plTree'), plTreeSetting);

        //名称验证
        jQuery.validator.addMethod("isValidateName", function (value, element) {
            var zipcode = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]{1}[A-Za-z0-9\u4e00-\u9fa5_]{0,19}$");
            return this.optional(element) || zipcode.test(value);
        }, "输入一个有效的岗位名称，不能以下划线开头，长度最多20位！");

        $form.validate({
            rules: {
                'name': {
                    required: true,
                    isValidateName: true
                },
                'order': {
                    required: true,
                    digits: true
                },
                'id': {
                    required: true,
                    digits: true
                }
            },

            messages: {
                'name': {
                    required: "名称不能为空"
                },
                'order': {
                    required: "排序字段不能为空"
                },
                'id': {
                    required: "编号不能为空"
                }
            }
        });

    });

    function fillForm() {
        $.ajax({
            type: 'GET',
            cache: false,
            async: false,
            dataType: 'json',
            url: '${ctx}/${frameworkPath}/position/view/${param.id}',
            success: function (data) {
                loadPositionTypes(data.rows['type']);
                loadData(data.rows, $form);
                var val = $('#type').val();
                if (val == 1) {
                    $('#orgDiv').show();
                    $('#plDiv').hide();
                }
                else if (val == 2) {
                    $('#orgDiv').hide();
                    $('#plDiv').show();
                }
                else if (val == 0) {
                    $('#orgDiv').hide();
                    $('#plDiv').hide();
                }
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {
                $.messager.alert('<fmt:message key="message.title" />',
                        '错误：' + XmlHttpRequest.status, 'error');
            }
        });
    }

    function loadPositionTypes(typeValue) {
        //加载功能
        $.ajax({
            type: 'GET',
            url: '${ctx}/${frameworkPath}/item/POSITION_TYPE/sub',
            async: false,
            dataType: 'json',
            success: function (data) {
                var tempAjax = "";
                $.each(data, function (idx, item) {
                    if (typeValue == item.value) {
                        tempAjax += "<option selected='true' value='" + item.value + "'>" + item.name + "</option>";
                    }
                    else {
                        tempAjax += "<option value='" + item.value + "'>" + item.name + "</option>";
                    }
                })
                $("#type").empty();
                $("#type").append(tempAjax);
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {
                alert('error');
            }
        });
    }

    function formValid() {
        var retObj = new Object();
        var valid = $("#position_form").valid();
        if (valid) {
            var orgs = zTree.getCheckedNodes(true);
            var checkedOrgs = new Array();
            $.each(orgs, function (i, val) {
                checkedOrgs.push(val.id);
            });

            var pls = plTree.getCheckedNodes(true);
            var positionLevels = new Array();
            $.each(pls, function (i, val) {
                positionLevels.push(val.id);
            });

            $form.ajaxSubmit({
                url: "${ctx}/${frameworkPath}/position/edit/${param.id}",
                type: "post",
                async: false,
                traditional: true,
                dataType: 'json',
                data: {checkedOrgs: checkedOrgs, positionLevels: positionLevels},
                success: function (message) {
                    if (message.success) {
                        retObj.text = "保存成功！";
                        retObj.state = true;
                    } else {
                        retObj.text = "保存失败！";
                        retObj.state = false;
                    }
                }
            });
        } else {
            return;
        }
        return retObj;
    }

    var zTreeOnAsyncSuccess = function () {
        asyncNodes(zTree.getNodes(), zTree);
        zTree.expandAll(true);
    }

    var plTreeOnAsyncSuccess = function () {
        asyncNodes(plTree.getNodes(), plTree);
        plTree.expandAll(true);
    }

    function asyncNodes(nodes, tree) {
        if (!nodes) return;
        for (var i = 0, l = nodes.length; i < l; i++) {
            if (nodes[i].isParent && nodes[i].zAsync) {
                asyncNodes(nodes[i].children, tree);
            }
            else {
                tree.reAsyncChildNodes(nodes[i], "refresh", true);
            }
        }
    }

    //岗位类型变化函数
    function change(val) {
        if (val == 1) {
            $('#orgDiv').show();
            $('#plDiv').hide();
        }
        else if (val == 2) {
            $('#orgDiv').hide();
            $('#plDiv').show();
        }
        else if (val == 0) {
            $('#orgDiv').hide();
            $('#plDiv').hide();
        }
    }
</script>
</body>
</html>